:root {
  --color-blue: #0077fe;
  --color-pink: #ffa8dc;
  --color: #ffffff;
  --color-content: rgba(255, 255, 255, 0.6);
  --color-des: rgba(255, 255, 255, 0.4);
  --color-dark: #131419;
  --color-grey: #25262e;
  --color-light: rgba(255, 255, 255, 0.05);
  --color-green: #00c076;
  --color-red: #f84960;
  --color-sky-blue: #00ccff;
  --icon-color: rgba(255, 255, 255, 0.15);
  --border-color: #24262d;
  --border-hover-color: #94f2ff;
  --card-gap: 6px;

  --background: #17062d;
  --card: #131419;
  --input: #000000;
  --field: #000000;
  --scroll: #25262e;

  --dialog-mask: rgba(0, 0, 0, 0.8);
  --dialog-content: rgba(255, 255, 255, 0.1);
  --dialog-title: #29273d;
  --dialog-mask: rgba(0, 0, 0, 0.8);

  --select-hover: rgba(0, 0, 0, 0.1);
  --button-bg: linear-gradient(to right, #17062d, #795dc6);
  --note-color: rgba(255, 255, 255, 0.15);

  --space: 20px;
  --table-space: 15px;
  --radius-sm: 1px;
  --radius: 4px;

  --percent-icon-bg: #24262d;
  --percent-border-bg: #24262d;

  .g-dark {
    --color-blue: #2b3e40;
    --color-pink: #ffa8dc;
    --color-white: #ffffff;
    --color-white-opacity6: rgba(255, 255, 255, 0.6);
    --color-white-opacity4: rgba(255, 255, 255, 0.4);
    --color-white-opacity2: rgba(255, 255, 255, 0.2);
    --color-dark: #131419;
    --color-grey: #25262e;
  }
}
